<!DOCTYPE html>
<head>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/fetch.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link href="css/back/style.css" rel="stylesheet">
    <meta charset="UTF-8">
    <script>

        $(function () {
            $("ul.pagination li.disabled a").click(function(){
                console.log(this.parentElement);
                return false;
            });
        })
    </script>
    <title>后台管理</title>


</head>
<body>

<div class="workingArea">

    <div id="listDataTableDiv" class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
                <tr class="success">
                    <th>姓名</th><th>图片</th><th>进度</th><th>电话</th>
                    <th>科二教练</th><th>科三教练</th><th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="s in ss">
                    <td>{{s.name}}</td>
                    <td><img height="50px" :src="'img/student/'+ s.id + '.jpg'"></td>
                    <td>{{s.schedule}}</td>
                    <td>{{s.telephone}}</td>
                    <td v-if="s.coach2!=null">{{s.coach2.name}}</td>
                    <td v-else>无</td>
                    <td v-if="s.coach3!=null">{{s.coach3.name}}</td>
                    <td v-else>无</td>
                    <td><a deleteLink="true" :href="'admin_student_delete?id=' + s.id"><span class="   glyphicon glyphicon-trash"></span></a></td>
                </tr>
            </tbody>
        </table>
        <div class="pageDiv">
            <nav>
                <ul class="pagination">
                    <li :class="page.hasPrevious ? 'w' : 'disabled' ">
                        <a href="listStudent.html?start=0">
                            <span>&laquo;</span>
                        </a>
                    </li>

                    <li :class="page.hasPrevious ? 'w' : 'disabled' ">
                        <a :href="'listStudent.html?start='+ (page.start-page.count)">
                            <span>&lsaquo;</span>
                        </a>
                    </li>

                    <li v-for="i in page.totalPage" :class="((i-1)*page.count)==page.start ? 'disabled' : 'w' ">
                        <a v-if="i*page.count-page.start<=20 && i*page.count-page.start>=-10"
                           :href="'listStudent.html?start=' + (i-1)*page.count"
                           :class="(i-1)*page.count==page.start ? 'current' : 'fa' ">
                            <span>{{i}}</span>
                        </a>
                    </li>
                    <li :class="page.hasNext ? 'w' : 'disabled' ">
                        <a :href="'listStudent.html?start='+ (page.start+page.count)" class="fa">
                            <span>&rsaquo;</span>
                        </a>
                    </li>
                    <li :class="page.hasNext ? 'w' : 'disabled' ">
                        <a :href="'listStudent.html?start=' + page.last" class="fa">
                            <span>&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

</div>
<script type="text/javascript">
    var data = {
        ss: [],
        page:[]
    };

    //ViewModel
    var vue = new Vue({
        el: '#listDataTableDiv',
        data: data,
        mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
            this.list(1);
            console.log(this);
        },
        methods: {
            list:function(start){
                var url = "heroes?start="+start;
                axios.get(url).then(function(response) {
                    vue.pagination = response.data;
                    console.log(vue.pagination);
                    vue.heros = response.data.list;
                })
            },
            add: function (event) {
                var url = "heroes";

                axios.post(url,this.hero4Add).then(function(response){
                    vue.list(1);
                    vue.hero4Add = { id: 0, name: '', hp: '0'}
                });
            },
            deleteHero: function (id) {
                var url = "heroes/"+id;
                axios.delete(url).then(function(response){
                    vue.list(1);
                });
            },
            jump: function(page){
                if('first'== page && 1!=vue.pagination.pageNum)
                    vue.list(1);

                else if('pre'== page &&	vue.pagination.hasPreviousPage )
                    vue.list(vue.pagination.prePage);

                else if('next'== page && vue.pagination.hasNextPage)
                    vue.list(vue.pagination.nextPage);

                else if('last'== page && vue.pagination.pageNum!=vue.pagination.pages)
                    vue.list(vue.pagination.pages);



            },
            jumpByNumber: function(start){
                if(start!=vue.pagination.pageNum)
                    vue.list(start);
            }
        }
    });
</script>

</body>
</html>